<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="keywords" content="汉字,拼音,笔画数">
    <meta name="description" content="获取汉字的拼音和笔画数的js库">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=8">

    <title>cnchar.js by theajack</title>
    <link rel="icon" href="./assets/v1/images/i.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="./assets/v1/css/index.css" />
    <link rel="stylesheet" type="text/css" href="./assets/v1/css/use-part.css" />
  </head>

  <body>
    <!--header-->
    <div id="header">
      <div id="title">cnchar.js</div>
      <div id="smallTitle">功能全面、多端支持的汉字繁体字拼音笔画js库</div>
      <a id='viewProjectLink' target="_blank" href="https://github.com/theajack/cnchar">
        <div id="viewProject" class="border-btn">View project on github</div>
      </a>
      <div>
        <input placeholder="请输入汉字尝试一下" id='tryInput' value='正在加载cnchar...' readonly class='unloaded' type="text">
      </div>
      <div id='tryResult'>
        <div id='spell'></div>
        <div id='stroke'></div>
        <div id='trad'></div>
        <div id='spark'></div>
        <div id='strokeOrder'></div>
        <div id='draw'></div>
      </div>
    </div>
    <!-- <div id="usePart" class="bg-gray2 text-black part clearfix">
      <div class="part-title">快速使用</div>
      <div id='useList'>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
        <span class='api-use-item'>汉字<span class="glyphicon glyphicon-arrow-right"></span>拼音</span>
      </div>
    </div>
    <div id='runAPI'>
    </div> -->
    <!--intro-->
    <div id="introPart" class="bg-gray text-black part clearfix">
      <div class="part-title">功能</div>
      <div class="func-item">
        <img class="func-img" src="./assets/v1/images/pin.png" />
        <div class="func-text">拼音|音调</div>
      </div>
      <div class="func-item">
        <img class="func-img" src="./assets/v1/images/duo.png" />
        <div class="func-text">多音字|词</div>
      </div>
      <div class="func-item">
        <img class="func-img" src="./assets/v1/images/bi.png" />
        <div class="func-text">笔画数|笔序</div>
      </div>
      <div class="func-item">
        <img class="func-img" src="./assets/v1/images/fan.png" />
        <div class="func-text">繁体字|火星文</div>
      </div>
    </div>
    <!--download-->
    <div id="downloadPart" class="bg-dark text-white part">
      <div class="part-title">安装使用</div>
      <pre class='demo-code'>import cnchar from 'cnchar';
'汉字'.spell();
'汉字'.stroke();</pre>
      <pre class='demo-code'>&lt;script src="https://cdn.jsdelivr.net/gh/theajack/cnchar/dist/cnchar.latest.min.js">&lt;/script>
&lt;script>
    '汉字'.spell();
    '汉字'.stroke();
&lt;/script></pre>
      <!-- <div class="part-title small font-size-bigger">1.script 标签方式引入</div>
        <div class="part-title small">引用： &lt;script src="https://www.theajack.com/cnchar/cnchar.min.js"&gt;&lt;/script&gt;</div>
        <div class="part-title small font-size-bigger">2.npm 方式安装</div>
        <div class="part-title small">安装: npm install cnchar</div>
        <div class="part-title small">使用: import CnChar from 'cnchar' 或 const CnChar = require('cnchar')</div> -->
      <!-- <div id="copyBtn" class="border-btn mb-install" onclick="J.open('cnchar.2.0.4.min.js')">复制源码</div> -->
      <div id="copyBtn" class="border-btn mb-install"
        onclick="J.open('https://github.com/theajack/cnchar#user-content-cnchar')">点我查看详细</div>
    </div>
    </div>
    <!--api-->
    <div id="apiPart" class="bg-gray part clearfix">
      <div class="part-title text-black relative">简单使用</div>
      <div class="api-item">
        <div class="api-item-title">.spell()</div>
        <div class="api-item-text">获取汉字完整拼音</div>
        <div class="api-content-wrapper">
          <div class="api-content clearfix">
            "测试".spell()
            <span class="api-content-result" onclick="this.txt('测试'.spell())">查看</span>
          </div>
          <div class="api-content clearfix">
            "测试".spell("up")
            <span class="api-content-result" onclick="this.txt('测试'.spell('up'))">查看</span>
          </div>
          <div class="api-content clearfix">
            "测试".spell("low")
            <span class="api-content-result" onclick="this.txt('测试'.spell('low'))">查看</span>
          </div>
          <div class="api-content clearfix">
            "测试".spell("array")
            <span class="api-content-result" onclick="this.txt('测试'.spell('array'))">查看</span>
          </div>
          <div class="api-content clearfix">
            "测试".spell("array","up")
            <span class="api-content-result" onclick="this.txt('测试'.spell('array','up'))">查看</span>
          </div>
          <div class="api-item-text">非汉字会返回原字符串</div>
        </div>
        <div class="api-test-wrapper">
          <div class="api-item-ltitle">尝试一下</div>
          <input type="text" class="api-test-input" placeholder="请输入汉字" />
          <span class="api-test-btn" onclick="this.prev().val(this.prev().val().spell())">获取</span>
        </div>
      </div>
      <div class="api-item">
        <div class="api-item-title">.spell('first')</div>
        <div class="api-item-text">获取汉字拼音首字母</div>
        <div class="api-content-wrapper">
          <div class="api-content clearfix">
            "测试".spell('first')
            <span class="api-content-result" onclick="this.txt('测试'.spell('first'))">查看</span>
          </div>
          <div class="api-content clearfix">
            "测试".spell('first','low')
            <span class="api-content-result" onclick="this.txt('测试'.spell('first','low'))">查看</span>
          </div>
          <div class="api-content clearfix">
            "测试".spell("array",'first',"up")
            <span class="api-content-result" onclick="this.txt('测试'.spell('array','first','up'))">查看</span>
          </div>
          <div style="height:1px"></div>
          <div class="api-item-text">非汉字会返回原字符串</div>
        </div>
        <div class="api-test-wrapper">
          <div class="api-item-ltitle">尝试一下</div>
          <input type="text" class="api-test-input" placeholder="请输入汉字" />
          <span class="api-test-btn" onclick="this.prev().val(this.prev().val().spell('first'))">获取</span>
        </div>
      </div>
      <div class="api-item">
        <div class="api-item-title">.stroke()</div>
        <div class="api-item-text">获取汉字笔画数</div>

        <div class="api-content-wrapper">
          <!-- <div class="api-item-ltitle">如何使用</div> -->
          <div class="api-content clearfix">
            "测试".stroke()
            <span class="api-content-result" onclick="this.txt('测试'.stroke())">查看</span>
          </div>
          <div class="api-item-text">非汉字会返回原字符串长度</div>
        </div>
        <div class="api-test-wrapper">
          <div class="api-item-ltitle">尝试一下</div>
          <input type="text" class="api-test-input" placeholder="请输入汉字" />
          <span class="api-test-btn" onclick="this.prev().val(this.prev().val().stroke())">获取</span>
        </div>
      </div>
    </div>
    <!--relate-->
    <div id="relatePart" class="bg-dark text-white part ">
      <div class="part-title hassmall">友情链接</div>
      <div class="part-title small">(欢迎访问)</div>
      <div id="tjLinks">
      </div>
    </div>
    <!--footer-->
    <div id="footer" class="bg-black text-white part">
      <div id="footerLink">
        <span class="link" onclick="J.open('https://github.com/theajack')">GitHub</span>
        <span class="split-icon">|</span>
        <span class="link"
          onclick="J.open('http://weibo.com/p/1005055304330572/home?from=page_100505&mod=TAB&is_all=1')">Sina
          Micro-blog</span>
        <span class="split-icon">|</span>

        <span class="wechat-public d-hide" onclick="this.child(0).fadeToggle()">
          WeChat Official Accounts
          <img class="wechat-img" src="./assets/v1/images/wechat_qrcode.jpg" />
        </span>
        <span class="split-icon d-hide">|</span>

        Email:theajack@qq.com
        <span class="split-icon d-hide">|</span>
        <span class="link d-hide" onclick="J.open('https://www.theajack.com')">theajack.com</span>
        <div class=" d-show">
          <span class="wechat-public" onclick="this.child(0).fadeToggle()">
            WeChat Official Accounts
            <img class="wechat-img" src="./assets/v1/images/wechat_qrcode.jpg" />
          </span>
          <span class="split-icon">|</span>
          <span class="link" onclick="J.open('https://www.theajack.com')">theajack.com</span>
        </div>
      </div>
      <div id="copyright">
        <span class="glyphicon glyphicon-copyright-mark"></span> <span id='_year'>20xx</span> TheaJack All rights reserved
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/jetter.min.js"></script>
    <script src="./assets/v1/js/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cnchar-all/cnchar.all.min.js" onload='loaded()'></script>
    <!-- <script src="https://www.theajack.com/cnchar/dist/cnchar.latest.min.js"></script>
    <script src="https://www.theajack.com/cnchar/dist/cnchar.order.latest.min.js"></script>
    <script src="https://www.theajack.com/cnchar/dist/cnchar.poly.latest.min.js"></script>
    <script src="https://www.theajack.com/cnchar/dist/cnchar.trad.latest.min.js" onload='loaded()'></script> -->
    <script src="./assets/v1/js/run.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/link.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/logo.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/theajack/theajack.github.com/assets/js/log.js"></script>
    <!--<script type="text/javascript" name="cnchar.js" src="https://www.theajack.com/assets/js/stat.js"></script>-->
    <script>
      var _mtac = {};
      (function () {
        var mta = document.createElement("script");
        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500700068");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
      })();
    </script>
  </body>
</html>